<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Dojo, javascript, content editable, virtual keyboard, fubar_perl" />
<meta name="description" content="Javascript virtual keyboard for input to content editable iframe or div. Also featuring Dojo integration!" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="distribution" content="Global" />
<meta name="author" content="Dwight Vietzke" />
<meta http-equiv="Reply-to" content="dwight_vietzke@yahoo.com" />
<meta name="classification" content="mobile internet website software" />
<meta name="copyright" content="Copyright©2008-2009 - OpenSiteMobile" />

	<title>Virtual Keyboard - Editable</title>

<script type="text/javascript" charset='utf-8' src="./msos/dojo_config.js"></script>
<script type="text/javascript" charset='utf-8' src="./dojo/dojo.js"></script>

<script type='text/javascript'>
/* <![CDATA[ */

// Set to current from default (dojo_config)
dojo.msos_doctype = 'xhtml_trans';

dojo.require("msos.common");
dojo.require("msos.on_screen_kb");

var input_array = [];

function init_page() {

        // Test browser basics
        if (!msos.common.browser_current())  return false;
        if (!msos.common.browser_editable()) return false;

        // Add iframe(s) for use with keyboard
        input_array[0] = dojo.byId('pub_ta_iframe');

        // Create a virtual keyboard tool
        var vt_kb_tool_obj = new msos.on_screen_kb.create_tool(
                dojo.byId("keyboard_container"),
                dojo.byId("keyboard_header"),
                dojo.byId("keyboard_close"),
                dojo.byId("keyboard_display"),
                input_array
        );

        vt_kb_tool_obj._vars.adj_left = 2;            // Initial kb position relative to input_array[0]
        vt_kb_tool_obj._vars.adj_top  = 85;           // +/- adj. left and +/- adj. top

        // Configure our keyboard start button...
        var button_config_s = {
                img_name :	    'ed_keyboard.gif',
                img_url :	    djConfig.msos_folder + '/images/',
                img_title :	    vt_kb_tool_obj.i18n.button_title,
                img_alt :	    vt_kb_tool_obj.i18n.button_alt,
                img_size :	    'img_sml',
                img_but_id :        'img_keyboard',
                button_mouseup :    vt_kb_tool_obj.keyb_button_onmouseup
        }

        // Generate our keyboard start button...
        var keyb_button = dojo.byId("keyboard_button");
        var kb_butt_obj_s = new msos.common.generate_img_button(keyb_button);

        // And append the button into our document...
        for (var val in button_config_s) { kb_butt_obj_s[val] = button_config_s[val]; }
        kb_butt_obj_s.img_button_append();

	// This section is useful for testing and demo purposes.
	var config_ul = dojo.byId('configuration');
	config_ul.innerHTML = '';	// Clear na ref (for valid xhtml)
	for (var parm in djConfig) {
	    if (typeof(djConfig[parm]) == 'boolean') {
		var list_elm   = document.createElement("li");
		var inpt_elm_t = document.createElement("input");
		var inpt_elm_f = document.createElement("input");
		inpt_elm_t.type = "radio";
		inpt_elm_f.type = "radio";
		inpt_elm_t.name = parm;
		inpt_elm_f.name = parm;
		inpt_elm_t.value = 'true';
		inpt_elm_f.value = 'false';
		if (djConfig[parm])	inpt_elm_t.checked = true;
		else			inpt_elm_f.checked = true;
		var true_txt = document.createTextNode('T ');
		var list_txt = document.createTextNode('F ' + parm); 
		list_elm.appendChild(inpt_elm_t);
		list_elm.appendChild(true_txt);
		list_elm.appendChild(inpt_elm_f);
		list_elm.appendChild(list_txt);
		config_ul.appendChild(list_elm);
	    }
	}

	// Set current language in menu (testing and demo purposes)
	msos.common.set_select_menu(dojo.byId('select_language'),  djConfig.locale);
}

// Start our clipboard demo
dojo.addOnLoad(init_page);

/* ]]> */
</script>

<link rel='stylesheet' type='text/css' charset='utf-8' href="./msos/style/fubar.css" media='screen, handheld' />
<link rel="stylesheet" type='text/css' charset='utf-8' href="./msos/style/keyboard.css" media='screen, handheld' />
<link rel='shortcut icon' href='./msos/images/osm.ico' />

<style type="text/css">
/* <![CDATA[ */

ul#language option {
    width:20px;
    text-align:center;
}

/* ]]> */
</style>

</head>
<body>

<div id='body'>

<div class='marquee'>
    <img id='osm_logo_small' src='./msos/images/osm_logo_sml.jpg' class='marquee_img' alt="OpenSiteMobile" />
</div>

<div class='header'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<h1>Virtual Keyboard <span id='keyboard_button'></span></h1>

<iframe id='pub_ta_iframe' class='msos_sized' src='xhtml_iframe_good.html'></iframe>

<!-- Keyboard elements: do not modify -->
<div id="keyboard_container">
<div id="keyboard_close"></div>
<div id="keyboard_header" class="drag_header"></div>
<div id="keyboard_display"></div>
</div>

<div class="pgrph_sml">Start the virtual keyboard, and add text to the editable iframe at your cursor position.</div>

<noscript>
<h2><span class='alert'>Your browser&#39;s JavaScript compiler is turned off or isn&#39;t available.</span></h2>

<p>You will need to enable JavaScript in your browser before browser detection will function properly!</p>
</noscript>

<h3>Page Testing</h3>

<form accept-charset='utf-8' action='virtual_kb_edit.html' method='get'>
<div class='list_large'>

<ul id='language'>
<li><select id='select_language' name='locale'>
    <option value='ar'> ar </option>
    <option value='ca'> ca </option>
    <option value='cs'> cs </option>
    <option value='da'> da </option>
    <option value='de'> de </option>
    <option value='el'> el </option>
    <option value='en'> en </option>
    <option value='es'> es </option>
    <option value='fi'> fi </option>
    <option value='fr'> fr </option>
    <option value='he'> he </option>
    <option value='hu'> hu </option>
    <option value='it'> it </option>
    <option value='ja'> ja </option>
    <option value='ko'> ko </option>
    <option value='nb'> nb </option>
    <option value='nl'> nl </option>
    <option value='pl'> pl </option>
    <option value='pt'> pt </option>
    <option value='ru'> ru </option>
    <option value='sk'> sk </option>
    <option value='sl'> sl </option>
    <option value='sv'> sv </option>
    <option value='th'> th </option>
    <option value='tr'> tr </option>
    <option value='zh'> zh </option>
</select> Language</li>
</ul>

<ul id='configuration'><li>Not Available</li></ul>

<input type="submit" value="Reset Page" />

</div>
</form>

<h3>Reference:</h3>

<div class='list_small'>
<ul>
    <li><a href='./msos/common.js'>msos.common</a></li>
    <li><a href='./msos/on_screen_kb.js'>msos.on_screen_kb</a></li>
</ul>
</div>

<h3 title='Testing utf-8 encoded characters'>Iñtërnâtiônàlizætiøn</h3>

<div class='footer'>
<a href='javascript: history.go(-1);' title='Return to the previous page'> Back </a>::
<a href='./index.html' title='Back to index page'> Home </a>
</div>

<div id='copyright'>
<span class='no_br'>Powered by:
   <a href='http://www.opensitemobile.com'>
  <span class='bold_text' title="Copyright©2008-2009 OpenSiteMobile - All rights reserved">MobileSiteOS</span></a>™</span>
</div>

</div> <!-- end 'body' div -->

</body>
</html>